<template>
  <!-- 页面容器 -->
  <div class="page-container">
    <!-- 顶部标题栏 -->
    <header class="header">用户登录</header>

    <!-- 主要内容区域 -->
    <div class="pb-20">
      <!-- 登录表单 -->
      <div class="p-6">
        <div class="space-y-6">
          <!-- 手机号码输入框 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              手机号码：
            </label>
            <input
                v-model="loginForm.phone"
                type="tel"
                placeholder="请输入手机号码"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-colors"
            >
          </div>

          <!-- 密码输入框 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              密码：
            </label>
            <input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-colors"
            >
          </div>
        </div>

        <!-- 按钮区域 -->
        <div class="mt-8 space-y-4">
          <!-- 登录按钮 -->
          <button
              @click="handleLogin"
              class="w-full bg-primary-500 hover:bg-primary-600 text-white py-3 rounded-lg font-medium transition-colors"
          >
            登录
          </button>

          <!-- 注册按钮 -->
          <button
              @click="goToRegister"
              class="w-full bg-white hover:bg-gray-50 text-primary-500 py-3 rounded-lg font-medium border border-primary-500 transition-colors"
          >
            去注册
          </button>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <FooterNav />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import FooterNav from './FooterNav.vue'

// 初始化路由实例
const router = useRouter()

// 登录表单数据
const loginForm = ref({
  phone: '',  // 手机号码
  password: '' // 密码
})

/**
 * 处理登录逻辑
 */
const handleLogin = () => {
  // 表单验证
  if (!loginForm.value.phone || !loginForm.value.password) {
    alert('请填写完整的登录信息')
    return
  }

  // 实际应用中这里会调用登录API
  alert('登录成功')

  // 登录成功后跳转到首页
  router.push('/')
}

/**
 * 跳转到注册页面
 */
const goToRegister = () => {
  router.push('/register')
}
</script>